import {
  bind_myplatform_application_list,
  bind_platform_application_list,
} from '@/services/instiution';
import { ActionType, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
import { Button, Tabs, Tag } from 'antd';
import { useRef, useState } from 'react';
import ApprovedCheck from './components/ApprovedCheck';
import InitiatedCheck from './components/InitiatedCheck';
import PendAgree from './components/PendAgree';
import PendCheck from './components/PendCheck';
import PendRefuse from './components/PendRefuse';
type GithubIssueItem = {
  url: string;
  id: number;
  number: number;
  title: string;
  labels: {
    name: string;
    color: string;
  }[];
  state: string;
  comments: number;
  created_at: string;
  updated_at: string;
  closed_at?: string;
  status: number;
};
const ExamineApprove = () => {
  const actionRef = useRef<ActionType>();
  const actionRef2 = useRef<ActionType>();
  const actionRef3 = useRef<ActionType>();
  // 存储审批状态
  const [status, setStatus] = useState<number>(1);
  // 存储当前id
  const [id, setId] = useState<number>();
  // 存储当前Tab的key
  const [selectedKey, setSelectedKey] = useState<string>('我发起的');
  // 我发起的查看模态框状态
  const [isInitiatedModalOpen, setIsInitiatedModalOpen] = useState(false);
  // 控制我发起的查看模态框的显示与隐藏
  const isShowInitiatedModal = (status: boolean) => {
    setIsInitiatedModalOpen(status);
  };
  // 待审批查看模态框状态
  const [isPendModalOpen, setIsPendModalOpen] = useState(false);
  // 控制待审批查看模态框的显示与隐藏
  const isShowPendModal = (status: boolean) => {
    setIsPendModalOpen(status);
  };
  // 待审批同意模态框状态
  const [isAgreeModalOpen, setIsAgreeModalOpen] = useState(false);
  // 控制待审批同意模态框的显示与隐藏
  const isShowAgreeModal = (status: boolean) => {
    setIsAgreeModalOpen(status);
  };
  // 待审批拒绝模态框状态
  const [isRefuseModalOpen, setIsRefuseModalOpen] = useState(false);
  // 控制待审批拒绝模态框的显示与隐藏
  const isShowRefuseModal = (status: boolean) => {
    setIsRefuseModalOpen(status);
  };
  // 已审批的查看模态框状态
  const [isApprovedModalOpen, setIsApprovedModalOpen] = useState(false);
  // 控制已审批的查看模态框的显示与隐藏
  const isShowApprovedModal = (status: boolean) => {
    setIsApprovedModalOpen(status);
  };
  // 获取我发起的列表数据
  const getSelfList = async (params: {
    pageSize?: number | undefined;
    current?: number | undefined;
    keyword?: string | undefined;
  }) => {
    //默认分页参数和后端接口字段不匹配
    let request_body = {
      ...params,
      current: params.current,
      pageSize: params.pageSize,
    };
    const res = await bind_platform_application_list(request_body);
    // console.log('机构列表', res);
    return {
      data: res.data.list,
      success: true,
      total: res.data.total_count,
    };
  };
  // 获取待审批的列表数据
  const getPendList = async (params: any) => {
    //默认分页参数和后端接口字段不匹配
    let request_body = {
      ...params,
      current: params.current,
      pageSize: params.pageSize,
      type: 1,
    };
    const res = await bind_myplatform_application_list(request_body);
    // console.log('待审批列表', res);
    return {
      data: res.data.list,
      success: true,
      total: res.data.total_count,
    };
  };
  // 获取已审批的列表数据
  const getApprovedList = async (params: any) => {
    //默认分页参数和后端接口字段不匹配
    let request_body = {
      ...params,
      current: params.current,
      pageSize: params.pageSize,
      type: 2,
    };
    const res = await bind_myplatform_application_list(request_body);
    // console.log('已审批列表', res);
    return {
      data: res.data.list,
      success: true,
      total: res.data.total_count,
    };
  };
  // 切换tab的回调事件
  const onChange = (key: string) => {
    setSelectedKey(key);
    if (key == '我发起的') {
      actionRef.current?.reload();
    } else if (key == '待审批') {
      actionRef2.current?.reload();
    } else if (key == '已审批') {
      actionRef3.current?.reload();
    }
  };
  // console.log('tab', selectedKey);

  // 我发起的列表
  const columns: ProColumns<GithubIssueItem>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      align: 'center',
      width: 48,
    },
    {
      title: '机构账号',
      dataIndex: 'phone',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '账号',
      dataIndex: 'phone',
      hideInTable: true,
      align: 'center',
    },
    {
      title: '机构名称',
      dataIndex: 'name',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '名称',
      dataIndex: 'name',
      hideInTable: true,
      align: 'center',
    },
    {
      title: '机构编号',
      dataIndex: 'unique_code',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '申请时间',
      key: 'create_time',
      dataIndex: 'create_time',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '申请时间',
      dataIndex: 'create_time',
      valueType: 'dateRange',
      align: 'center',
      colSize: 2,
      hideInTable: true,
      search: {
        transform: (value) => {
          return {
            start_date: value[0],
            end_date: value[1],
          };
        },
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      align: 'center',
      valueType: 'select',
      valueEnum: {
        0: {
          text: '待审批',
        },
        1: {
          text: '已同意',
        },
        2: {
          text: '已拒绝',
        },
      },
      render: (_: any, record) => (
        <>
          {record.status === 0 ? <Tag color="orange">待审批</Tag> : <></>}
          {record.status === 1 ? <Tag color="green">已同意</Tag> : <></>}
          {record.status === 2 ? <Tag color="red">已拒绝</Tag> : <></>}
        </>
      ),
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      align: 'center',
      render: (text, record, _, action) => (
        <a
          key="editable"
          onClick={() => {
            setStatus(record.status);
            setId(record.id);
            isShowInitiatedModal(true);
          }}
        >
          查看
        </a>
      ),
    },
  ];
  // 待审批
  const columns2: ProColumns<GithubIssueItem>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      align: 'center',
      width: 48,
    },
    {
      title: '机构账号',
      dataIndex: 'phone',
      align: 'center',
    },
    {
      title: '机构名称',
      dataIndex: 'name',
      align: 'center',
    },
    {
      title: '机构编号',
      dataIndex: 'unique_code',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '申请人',
      dataIndex: 'manage_name',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '申请时间',
      key: 'create_time',
      dataIndex: 'create_time',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '申请时间',
      dataIndex: 'create_time',
      valueType: 'dateRange',
      align: 'center',
      hideInTable: true,
      search: {
        transform: (value) => {
          return {
            start_date: value[0],
            end_date: value[1],
          };
        },
      },
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      align: 'center',
      render: (text, record, _, action) => (
        <>
          <Button
            key="check"
            type="link"
            size="small"
            onClick={() => {
              setId(record.id);
              isShowPendModal(true);
            }}
          >
            查看
          </Button>
          <Button
            key="agree"
            type="link"
            size="small"
            onClick={() => {
              setId(record.id);
              isShowAgreeModal(true);
            }}
          >
            同意
          </Button>
          <Button
            key="refuse"
            type="link"
            size="small"
            onClick={() => {
              setId(record.id);
              isShowRefuseModal(true);
            }}
          >
            拒绝
          </Button>
        </>
      ),
    },
  ];
  // 已审批
  const columns3: ProColumns<GithubIssueItem>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      align: 'center',
      width: 48,
    },
    {
      title: '机构账号',
      dataIndex: 'phone',
      align: 'center',
    },
    {
      title: '机构名称',
      dataIndex: 'name',
      align: 'center',
    },
    {
      title: '机构编号',
      dataIndex: 'unique_code',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '审批人',
      dataIndex: 'application_name',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '审批时间',
      key: 'update_time',
      dataIndex: 'update_time',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '审批时间',
      dataIndex: 'update_time',
      valueType: 'dateRange',
      align: 'center',
      colSize: 2,
      hideInTable: true,
      search: {
        transform: (value) => {
          return {
            start_date: value[0],
            end_date: value[1],
          };
        },
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      align: 'center',
      valueType: 'select',
      valueEnum: {
        1: {
          text: '已同意',
        },
        2: {
          text: '已拒绝',
        },
      },
      render: (_: any, record) => (
        <>
          {record.status === 1 ? <Tag color="green">已同意</Tag> : <></>}
          {record.status === 2 ? <Tag color="red">已拒绝</Tag> : <></>}
        </>
      ),
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      align: 'center',
      render: (text, record, _, action) => (
        <>
          <Button
            key="check"
            type="link"
            size="small"
            onClick={() => {
              setStatus(record.status);
              setId(record.id);
              isShowApprovedModal(true);
            }}
          >
            查看
          </Button>
        </>
      ),
    },
  ];
  return (
    <PageContainer breadcrumb={false}>
      <Tabs
        defaultActiveKey="我发起的"
        activeKey={selectedKey}
        onChange={onChange}
        items={[
          {
            key: '我发起的',
            label: '我发起的',
            children: (
              <ProTable<GithubIssueItem>
                columns={columns}
                actionRef={actionRef}
                cardBordered
                request={async (params = {}) => getSelfList(params)}
                editable={{
                  type: 'multiple',
                }}
                rowKey={(record) => record.id}
                search={{
                  labelWidth: 'auto',
                  collapseRender: false,
                  collapsed: false,
                  span: 4,
                }}
                options={{
                  setting: {
                    listsHeight: 400,
                  },
                }}
                pagination={{
                  pageSize: 10,
                }}
                dateFormatter="string"
                headerTitle="我发起的列表"
              />
            ),
          },
          {
            key: '待审批',
            label: '待审批',
            children: (
              <ProTable<GithubIssueItem>
                columns={columns2}
                actionRef={actionRef2}
                cardBordered
                request={async (params = {}) => getPendList(params)}
                editable={{
                  type: 'multiple',
                }}
                rowKey={(record) => record.id}
                search={{
                  labelWidth: 'auto',
                  collapsed: false,
                  span: 6,
                }}
                options={{
                  setting: {
                    listsHeight: 400,
                  },
                }}
                pagination={{
                  pageSize: 10,
                }}
                dateFormatter="string"
                headerTitle="待审批列表"
              />
            ),
          },
          {
            key: '已审批',
            label: '已审批',
            children: (
              <ProTable<GithubIssueItem>
                columns={columns3}
                actionRef={actionRef3}
                request={async (params = {}) => getApprovedList(params)}
                editable={{
                  type: 'multiple',
                }}
                rowKey={(record) => record.id}
                search={{
                  labelWidth: 'auto',
                  collapseRender: false,
                  collapsed: false,
                  span: 4,
                }}
                options={{
                  setting: {
                    listsHeight: 400,
                  },
                }}
                pagination={{
                  pageSize: 10,
                }}
                dateFormatter="string"
                headerTitle="已审批列表"
              />
            ),
          },
        ]}
      />
      {/* 我发起的查看模态框 */}
      {isInitiatedModalOpen ? (
        <InitiatedCheck
          isShowInitiatedModal={isShowInitiatedModal}
          isInitiatedModalOpen={isInitiatedModalOpen}
          id={id}
          status={status}
        ></InitiatedCheck>
      ) : (
        ''
      )}
      {/* 待审批的查看模态框 */}
      {isPendModalOpen ? (
        <PendCheck
          isShowPendModal={isShowPendModal}
          isPendModalOpen={isPendModalOpen}
          setSelectedKey={setSelectedKey}
          actionRef2={actionRef2}
          actionRef3={actionRef3}
          id={id}
        ></PendCheck>
      ) : (
        ''
      )}
      {/* 待审批的同意模态框 */}
      {isAgreeModalOpen ? (
        <PendAgree
          isShowAgreeModal={isShowAgreeModal}
          isAgreeModalOpen={isAgreeModalOpen}
          isShowPendModal={isShowPendModal}
          setSelectedKey={setSelectedKey}
          actionRef2={actionRef2}
          actionRef3={actionRef3}
          id={id}
        ></PendAgree>
      ) : (
        ''
      )}
      {/* 待审批的拒绝模态框 */}
      {isRefuseModalOpen ? (
        <PendRefuse
          isShowRefuseModal={isShowRefuseModal}
          isRefuseModalOpen={isRefuseModalOpen}
          isShowPendModal={isShowPendModal}
          setSelectedKey={setSelectedKey}
          actionRef2={actionRef2}
          actionRef3={actionRef3}
          id={id}
        ></PendRefuse>
      ) : (
        ''
      )}
      {/* 已审批的查看模态框 */}
      {isApprovedModalOpen ? (
        <ApprovedCheck
          isShowApprovedModal={isShowApprovedModal}
          isApprovedModalOpen={isApprovedModalOpen}
          status={status}
          id={id}
        ></ApprovedCheck>
      ) : (
        ''
      )}
    </PageContainer>
  );
};
export default ExamineApprove;
